<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head th:include="common/common :: bootcss">
    <title>统计车辆数量</title>
    <script>
        $(document).ready(function () {
            var page = {
                pageNum : 1,
                pageSize : 10,
                pages : 0,
                total : 0
            };

            $('.form_date').datetimepicker({
                language:  'zh-CN',
                weekStart: 1,
                todayBtn:  1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
                forceParse: 0
            });


            function query(increment) {
                if (increment < 0 && page.pageNum == 1) {
                    return;
                }
                if (increment > 0 && page.pageNum >= page.pages) {
                    return;
                }

                page.pageNum += increment;

                $.post("/admin/travel/carTotal", {
                    startTime : $("#formCarSearch input[name='startTime']").val(),
                    endTime : $("#formCarSearch input[name='endTime']").val()
                }, function(data) {
                    if (!data.success) {
                        console.log(data.errorMsg);
                    } else {
                        var html = "共计车辆：" + data.data.carTotal + "辆, 高速费用：" + data.data.amtTotal + "元";
                        $("#consumeTotalInfo").html(html);
                    }
                });

                $.post("/admin/travel/carList", {
                    startTime : $("#formCarSearch input[name='startTime']").val().trim(),
                    endTime : $("#formCarSearch input[name='endTime']").val().trim(),
                    //mobile : $("#formCarSearch input[name='mobile']").val().trim(),
                    pageNum : page.pageNum,
                    pageSize : page.pageSize
                }, function(data) {
                    if (!data.success) {
                        console.log(data.errorMsg);
                    } else {
                        var html = "";
                        page.pages = data.pages;
                        page.total = data.total;
                        data.data.forEach(function (e) {
                            html += "<tr>";
                            html += "<td>" +  e.id + "</td>";
                            html += "<td>" +  e.carNo + "</td>";
                            html += "<td>" +  e.startTime2  + "</td>";
                            html += "<td>" +  e.start + "</td>";
                            html += "<td>" +  e.endTime2 + "</td>";
                            html += "<td>" +  e.end + "</td>";
                            html += "<td>" +  e.amount + "</td>";
                            html += "</tr>";
                        })
                        $("#mainTable > tbody").html(html);

                        if (page.pageNum == 1) {
                            $("#liPrePage").addClass("disabled");
                        } else {
                            $("#liPrePage").removeClass("disabled")
                        }
                        if (page.pages > 1 && page.pageNum < page.pages) {
                            $("#liNextPage").removeClass("disabled");
                        } else {
                            $("#liNextPage").addClass("disabled");
                        }
                    }

                });
            }

            $("#btSearch").click(function () {
                query(0);
            })
            $("#btNextPage").click(function () {
                query(1);
            });
            $("#btPrePage").click(function () {
                query(-1);
            });


            query(0);

        });
    </script>
</head>
<body>
<ol class="breadcrumb">
    <li><a th:href="@{/admin/travel/car}">统计车辆数量</a></li>
</ol>

<form id="formCarSearch" class="form-inline" style="padding-bottom: 10px">

    <div class="form-group">
        <label>起止时间</label>
        <div class="input-group date form_date" data-link-format="yyyy-mm-dd">
            <input class="form-control" size="16" type="text" readonly name="startTime">
            <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
        </div>
        <div class="input-group date form_date" data-link-format="yyyy-mm-dd">
            <input class="form-control" size="16" type="text" readonly name="endTime">
            <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
        </div>
    </div>
    <br >
    <div class="form-group" style="margin-top: 10px">
        <label for="inSite">驶入站名</label>
        <input type="text" class="form-control" id="inSite" placeholder="驶入站名">
    </div>
    <div class="form-group" style="margin-top: 10px">
        <label for="outSite">驶出站名</label>
        <input type="text" class="form-control" id="outSite" placeholder="驶出站名">
    </div>
    <button id="btSearch" style="margin-top: 10px" type="button" class="btn btn-default">搜索</button>
</form>

<div style="padding-bottom: 10px">
    <span id="consumeTotalInfo"></span>
</div>
<table id="mainTable" class="table">
    <thead>
    <tr>
        <th>ID</th>
        <th>车牌号码</th>
        <th>驶入时间</th>
        <th>驶入站名</th>
        <th>使出时间</th>
        <th>驶出站名</th>
        <th>费用</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>
<ul class="pager">
    <li class="disabled" id="liPrePage"><a id="btPrePage" href="javascript:void(0);"><</a></li>
    <li id="liNextPage"><a id="btNextPage" href="javascript:void(0);" >></a></li>
</ul>

</body>
</html>